<template>
  <div class="layer-manage">
    <div class="head">
      <span
        class="item-button"
        @click="showLayers = !showLayers"
      > 专题图层 </span><img
        class="item-icon"
        src="/images/layers/menu.svg"
        @click="showLayers = !showLayers"
      >

      <span
        class="item-button"
        @click="reset"
      >重置</span>
    </div>
    <div v-show="showLayers">
      <template v-if="levelOneIsGroup">
        <el-collapse v-model="activeNames">
          <el-collapse-item
            v-for="collapse in datas"
            :key="collapse.id"
            :title="collapse.label"
            :name="collapse.id"
          >
            <el-tree
              ref="tree"
              :data="collapse.children"
              show-checkbox
              :default-expanded-keys="defaultExpandedKeys"
              node-key="id"
              highlight-current
              :render-content="renderContent"
              @check="treeCheck"
            />
          </el-collapse-item>
        </el-collapse>
      </template>
      <template v-else>
        <el-tree
          ref="tree"
          :data="datas"
          show-checkbox
          :default-expanded-keys="defaultExpandedKeys"
          node-key="id"
          highlight-current
          :render-content="renderContent"
          @check="treeCheck"
        />
      </template>
    </div>
  </div>
</template>

<script>
let oldKeys = [];
export default {
  props: {
    datas: {
      type: Array,
      default: () => []
    },
    defaultValues: {
      type: Array,
      default: () => []
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => []
    },
    defActivecollapse: {
      type: Array,
      default: () => []
    },
    levelOneIsGroup: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showLayers: true,
      activeNames: this.defActivecollapse
    };
  },
  mounted () {
    if (this.defaultValues && this.defaultValues.length) {
      this.setDefaultValues();
    }
  },
  methods: {
    reset () {
      this.setDefaultValues();
    },
    treeCheck () {
      const checkLeayerKeys = [];
      const newLayersInfo = [];
      // const treeNum = this.levelOneIsGroup ? this.datas.length : 1;
      if (this.levelOneIsGroup) {
        this.$refs.tree.map((vm) => {
          // const vm = this.levelOneIsGroup ? this.$refs["tree" + i][0] : this.$refs["tree" + i];
          checkLeayerKeys.push(...vm.getCheckedKeys(true));
          const checkNodes = vm.getCheckedNodes(true);
          checkNodes.map((item) => {
            item.layers && newLayersInfo.push(...item.layers);
          });
        });
      } else {
        const vm = this.$refs.tree;
        checkLeayerKeys.push(...vm.getCheckedKeys(true));
        const checkNodes = vm.getCheckedNodes(true);
        checkNodes.map((item) => {
          item.layers && newLayersInfo.push(...item.layers);
        });
      }
      this.$emit('changeLayerVisibility', {
        oldKeys: JSON.parse(JSON.stringify(oldKeys)),
        newLayersInfo
      });
      oldKeys = newLayersInfo.map((item) => item.id);
    },
    setDefaultValues () {
      if (this.levelOneIsGroup) {
        this.$refs.tree.map((vm) => {
          vm.setCheckedKeys(this.defaultValues, true);
        });
      } else {
        this.$refs.tree.setCheckedKeys(this.defaultValues, true);
      }
      this.$nextTick(() => {
        this.treeCheck();
      });
    },
    renderContent (h, { node, data, store }) {
      const { icon, colorIcon } = node.data;
      let iconJsx = null;
      if (icon) {
        iconJsx = <img class="icon-img" src={'/images/layers/' + icon + '.png'} />;
      }
      if (colorIcon) {
        iconJsx = <div class="icon-color" style={'background-color:' + colorIcon}></div>;
      }
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          {iconJsx}
        </span>
      );
    }
  }
};
</script>
<style lang="less">
.layer-manage {
  .icon-img {
    height: 18px;
    margin-left: 5px;
    vertical-align: middle;
  }
  .icon-color {
    display: inline-block;
    height: 12px;
    width: 12px;
    margin-left: 5px;
    margin-bottom: -2px;
  }
  .el-collapse-item__content {
    padding: 0;
    border: none;
  }
  .el-collapse-item__header {
    background: #0a2346;
    color: #ffffff;
    height: 28px;
    border-color: #0a2346;
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap,
  .el-tree {
    background: #0a2346;
    color: #ffffff;
  }
  .el-collapse-item__wrap {
    border-bottom-color: #0a2346;
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
  .el-tree-node__content {
    font-size: 12px;
    background-color: #0a2346;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
  }
  .el-tree-node__content:hover {
    background: #000;
  }
  
}
.el-cascader-node {
    width: 180px;
    padding: 0 20px;
  }
</style>

<style lang="less" scoped>
.layer-manage {
  width: 170px;
  /* border: 1px solid #ccc; */
  position: fixed;
  padding: 4px;
  border: 1px solid #3a80b7;
  background-color: #0a2346;
  top: 218px;
  left: 552px;
  .head {
    display: flex;
    justify-content: space-around;
    .item-icon {
      width: 24px;
      height: 18px;
      cursor: pointer;
      padding: 0;
      // margin-left: -19px;
      margin-top: 4px;
    }
    .item-button {
      padding: 4px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>
